<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	
	#app{
		 margin-left:10%;
		margin-top:35px; 
		width: 500px;
		border:2px solid lightblue;
		
		height: 500px;
		overflow: scroll;
	}

	.content{
		margin: 0 auto;
		padding-bottom: 20px;
		padding-left: 5px;
		position: relative;
	}

	.list-group{
		/*position: relative;*/
		max-height: 500px;
	}
	
	.audio{
		  padding-left: 10px;
		  width: 400px;
		  outline: none;
		  position: absolute;
		  top:543px;
	}


</style>
</head>
<body>



<div id="app">

<div class="content">
	<div class="row" >
		<div class="col-lg-9 col-md-9 col-xs-9 ">
			<div class="input-group">
				<input type="text " class="form-control" 
					@keyup.enter="searchMusic" v-model="query">
				<span class="input-group-btn" >
					<button class="btn btn-primary" @click="searchMusic">搜索</button>
				</span>
			</div>
		</div>
	</div>
  	
	
	<div class="list-group">
		<li class="list-group-item "  v-for="item in musicList" class="list">
			<a href="#" class="title" @click="playMusic(item.id)">
				{{item.name}}------------{{item.artists[0].name}}
			</a>
			

		</li>
	</div>
</div>

	 <div class="audio">
		<audio ref='audio' :src="musicUrl"  controls autoplay loop class="myaudio"></audio>
	 </div>





</div>



<br>

<script src="vue.js"></script>
<script src="axios.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var  vm= new Vue({
  el: '#app',

  data: {
  	query:"",
  	musicList:[],
  	musicUrl:""
  	 
  },

  methods:{
  	searchMusic(){//搜索歌名
  		axios.get("https://autumnfish.cn/search?keywords="+this.query)
  		.then((response)=>{
  			// console.log(response)
  			this.musicList = response.data.result.songs
  		})
  	},

  	playMusic(musicId){
	  	axios.get("https://autumnfish.cn/song/url?id="+musicId)
	  	.then((data)=>{
	  		 // console.log(data.data.data[0].url)//音乐地址
	  		 this.musicUrl = data.data.data[0].url
	  	})
  		
  	}


  }

})





</script>

	
</body>
</html>